<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="index2.css">
    <script src="js/lesson.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="css/footer.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>

        #footer{
            position: relative;;
            top: 1000px;
        }
        #mian img{
            /*transition-duration: 2s;!*设置动画持续时间*!*/
        }
        #mian img:hover{
            transform: scale(1.1);/*scale缩放的意思  1.2倍*/
        }
    </style>
</head>
<body>
<!--最外div-->
    <div id="bigdiv">
        <!--轮播图-->
        <div id="scorll">
            <div id="img">
                <img v-for="img in banner" class="img_1" :src="img.url" alt="">
            </div>
        </div>
        <div id="header">
            <div id="nav">
                <div id="logo_div">
                    <h1>A.S Hair Salon</h1>
                </div>
                <div id="navul">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="des/des.html">发型设计</a></li>
                        <li>
                            <a href="yhf/myproject.html">发型图片</a>
                        </li>
<!--                        <li><a href="#a5">Picture</a></li>-->
                        <li><a href="wdh/页面.html">著名设计师</a></li>
                        <li><a href="shop.html">美发产品</a></li>
                    </ul>
                </div>
                <hr>
                <span id="span1">We designed it <br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspWorth having</span>
                <div id="div1">
                    <input type="button" class="classbutton1" value="Products" onclick="window.open('zzx/题.html')">
                    <input type="button" class="classbutton2" value="联系我们" onclick="window.open('ll/qwe.html')">
                </div>
            </div>
        </div>
        <!--主体-->
        <div id="mian">
            <div class="m_children">
                <div class="m_children_top">
                        <div class="contect">
                            <div class="title">Design</div>
                            <a href="des/des.html">SEE MORE</a>
                            <p class="context">－ 发型设计 －</p>
                        </div>
                </div>
                <div class="m_children_right">
                        <div class="rightContect_nav" @click="author()"><img src="https://images.weddingvogue.cn/i/0/b2/0b2b1afd-c45b-11eb-b0db-0242ac170003.jpg" alt=""></div>
                        <div class="rightContect_top">
                            <div class="img">
                                <img src="jp/图片11.jpg" alt="">
                                <a>真实案例 | 2019款短发懒人烫发型 适合懒人的烫发造型</a>
                                <p>图文提供/京玺国际</p>
                                <p class="p_right">长发的女生固然是很好看的，可是自己洗一个头，再把头发给吹干，怎么也得要半小时以上，而对于一些不想花太多的时间来打理自己的头发的女生来说，就应该选择这一种懒人烫发短发发型的，因为头发是特别的短的，不管是洗头发还是平时的打理都不会用你太多的时间的，所以说这些都是...
                                </p>

                                <a href="#" class="a1">READ MORE&nbsp&nbsp></a>
                            </div>
                        </div>
                    <div class="rightContect_mid">
                            <div class="img">
                                <img src="jp/图片12.jpg" alt="">
                                <a>专题策划 | 女生流行偏分刘海烫发发型 好看的女生刘海烫发造型</a>
                                <p>图文提供/银禧美发</p>
                                <p class="p_right">今年都流行什么的刘海呢，现在在大街上也有不少的女生流行烫发发型发型的，她们选择的都是偏分刘海烫发的，所以说今年又开始流行起这一种偏分刘海了，如果你也喜欢短发发型...</p>
                                <a href="#" class="a1">READ MORE&nbsp&nbsp></a>
                            </div>
                    </div>
                    <div class="rightContect_bottom">
                        <div class="img">
                            <img src="jp/图片13.jpg" alt="">
                            <a>真实案例 | 男生冬季短发烫发发型图片 适合男生冬季扎的短发烫！</a><p>图文/回车键&告白宇张 图片提供/皇后美发企划</p>
                            <p class="p_right">「天人合一 • 道法自然」冬天到了，出门都得穿上保暖的外套才行，当然喜欢戴帽子的男生在选择发型的时候，不管选择什么发型都是可以的，可是不爱戴帽子的男生在选择男生冬季短发发型的时候，适合冬天的时候使用，因为这样的短发烫发...</p>
                            <a href="#" class="a1">READ MORE&nbsp&nbsp></a>
                        </div>
                        </div>
<!--                    <div class="rightContect_footer">-->
<!--                        <div class="img">-->
<!--                            <img src="https://images.weddingvogue.cn/i/c/1b/c1b016b2-c2b5-11eb-b0db-0242ac170003.jpg" alt="">-->
<!--                            <a>真实婚礼 | 雪山下的这场百人目的地婚礼，神圣感满分！</a><p>图文/回车键&告白宇张 图片提供/皇后婚礼企划</p>-->
<!--                            <p class="p_right">「天人合一 • 道法自然」的婚礼主题源于皇后婚礼新娘的特殊身份-道教师太，鉴于新娘对于中式传统文化的喜爱以及色彩、风格偏好，皇后婚礼决定以新娘的守护神兽-凤凰，作为婚礼的主要意象，融合中式传统文化风格打造婚礼场景。</p>-->
<!--                            <a href="#" class="a1">READ MORE&nbsp&nbsp></a>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
                <div class="m_children_left">
                    <div class="rightContect_nav" @click="author1()"><img src="https://images.weddingvogue.cn/i/1/d5/1d52a5f5-c45b-11eb-b0db-0242ac170003.jpg" alt=""></div>
                    <div class="rightContect_top"><div class="img">
                        <img src="jp/图片14.jpg" alt="">
                        <a>真实案例 | 女生编织烫发披肩发型图片 洋气又时尚的女生烫发造</a>
                        <p>图文提供/皇后美发企划</p>
                        <p class="p_right">现在有很多的女生都喜欢选择一些烫发发型的，这些烫发发型会让你变得更美的，编织烫发披肩发型，看着会让女生们变得更唯美，更有气质的，如果你也想要烫发，就赶紧来参考一下这些编织烫发型吧，这些编织烫发...</p>
                        <a href="#" class="a1">READ MORE&nbsp&nbsp></a>
                    </div>
                    </div>
                    <div class="rightContect_mid"><div class="img">
                        <img src="jp/图片15.jpg" alt="">
                        <a>真实案例 | 2018女生韩式中短发烫发发型 流行又时髦中短发烫发！</a>
                        <p>文/雁瑜 图片提供/沙龙风尚合作</p>
                        <p class="p_right">各种时尚元素盛行的今天，似乎出现了很多国家性的代表风格，比如我们常听到的韩风、日系等等，就是比较有代表性的流行风格。近几年韩风的女生发型和服饰都是人气超高的...！</p>
                        <a href="#" class="a1">READ MORE&nbsp&nbsp></a>
                    </div>
                    </div>
                    <div class="rightContect_bottom"><div class="img">
                        <img src="jp/图片16.jpg" alt="">
                        <a>真实案例 | 中长发适合烫什么发型 五款迷人中长发烫发造型！</a>
                        <p>图文提供 / AILAND艾兰婚礼</p>
                        <p class="p_right">现在的女生都是很喜欢丢一些中长发型的，因为中长发发型能让人变得更漂亮一些，也会变得更有气质...</p>
                        <a href="#" class="a1">READ MORE&nbsp&nbsp></a>
                    </div>
                    </div>

                </div>
            </div>

            <div class="m_childern1_pic" id="pic1">
                <div class="m_children_top">
                    <div class="contect">
                        <div class="title">Picture</div>
                        <a href="yhf/myproject.html">SEE MORE</a>
                        <p class="context">－ 发型图片 －</p>
                    </div>
                </div>
                <div id="pic_top">
                    <div class="pic_top">
                        <img src="jp/图片16.jpg" alt="">
                    </div>
                    <div class="pic_top">
                        <img src="jp/图片17.jpg" alt="">

                    </div>
                    <div class="pic_top">
                        <img src="jp/图片18.jpg" alt="">
                    </div>
                </div>
                <div id="pic_content">
                    <div class="pic_content">
                        <img src="jp/图片20.jpg.jpg" alt="">
                    </div>
                    <div class="pic_content">
                        <img src="jp/图片21.jpg" alt="">
                    </div>
                    <div class="pic_content">
                        <img src="jp/图片22.jpg" alt="">
                    </div>
                    <div class="pic_content">
                        <img src="jp/图片23.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="m_childern1_pic" id="pic">
                <div class="m_children_top">
                    <div class="contect">
                        <div class="title">Product</div>
                        <a href="shop.html">SEE MORE</a>
                        <p class="context">－ 美发产品 －</p>
                    </div>
                </div>
                <div id="products_top pic_top">
<!--                                    <div class="as"></div>-->
<!--                                    <p><a href="" id="a5"></a></p>-->
                                    <section class="sec">
                                        <div><img src="https://images.weddingvogue.cn/i/1/32/132ae793-a64c-11ea-8592-0242ac170003.jpg" alt=""></div>
                                        <div><img src="https://images.weddingvogue.cn/i/a/cb/acb879c0-a647-11ea-8592-0242ac170003.jpg" alt=""></div>
                                        <div><img src="https://images.weddingvogue.cn/2018/11/636776244641904697.jpg" alt=""></div>
                                        <div><img src="https://images.weddingvogue.cn/i/e/6e/e6e59399-73e8-11ea-a336-0242ac170003.jpg" alt=""></div>
                                        <div><img src="https://images.weddingvogue.cn/i/1/23/123d1931-f3f4-11e9-8c04-0242ac170007.jpg" alt=""></div>
                                        <div><img src="https://images.weddingvogue.cn/2016/04/635962534790127775.jpg" alt=""></div>
                                        <div><img src="https://images.weddingvogue.cn/i/5/e5/5e59d73f-9051-11eb-b0db-0242ac170003.jpg" alt=""></div>
                                        <div><img src="https://images.weddingvogue.cn/2015/12/635869184115151250.jpg" alt=""></div>
                                        <div><img src="https://images.weddingvogue.cn/i/6/23/6232c962-9cce-11eb-b0db-0242ac170003.jpg" alt=""></div>
                                    </section>
                </div>
            </div>
            <div class="m_childern1_pic" id="designer">
                <div class="m_children_top">
                    <div class="contect">
                        <div class="title">Designer</div>
                        <a href="wdh/页面.html">SEE MORE</a>
                        <p class="context">－ 著名设计师 －</p>
                    </div>
                </div>
                <div id="name_top">
                    <div class="pic_top">
                        <img src="wdh/001%20(1).jpg" alt="">
                    </div>
                    <div class="pic_top">
                        <img src="wdh/001%20(2).jpg" alt="">
                    </div>
                    <div class="pic_top">
                        <img src="wdh/001%20(3).jpg" alt="">
                    </div>
                </div>
            </div>


        </div>
        <div id="footer">
            <div class="foot_t">
                <div id="zuo_boby">
                    <h2 id="ft_title">A.S Hair Salon</h2>
                    <p>Lorem Ipsum is simply text the printing and<br>typesetting standard industry.
                        Onec Consequat<br> sapien ut cursus rhoncus. Nullam dui mi,<br> vulputate ac metus.
                    </p>
                    <h3>Trusted by<span style="color: orange">500+ People</span></h3>
                    <img src="jp/微信.webp" alt="" class="tubiao">
                    <img src="jp/qq.webp" alt="" class="tubiao">
                </div>
            </div>
            <div class="foot_t">
                <div id="mid_boby">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="manager/manager.html" class="lianjie">>>&nbspManager</a></li>
                        <li><a href="wdh/页面.html" class="lianjie">>>&nbspDesigner</a></li>
                        <li><a href="yhf/myproject.html" class="lianjie">>>&nbspPicture</a></li>
                        <li><a href="shop.html" class="lianjie">>>&nbspProduct</a></li>
                        <li><a href="ll/qwe.html" class="lianjie">>>&nbspContact Us</a></li>
                    </ul>
                </div>
            </div>
            <div class="foot_t">
                <div id="you_boby">
                    <h4>Contact Info</h4>
                    <p id="id1">地址:90 nsequursu dsdesdc, xxx Honey Street 049436.Newyork, NY.</p>
                    <p id="id2">电话:+1(12) 123 456 789</p>
                    <p id="id3">座机:+1(12) 123 456 789</p>
                    <p><a href="" class="lianjie">邮箱:123456789@qq.com</a></p>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="js/indexVue.js"></script>
<script src="js/auther_index.js"></script>


</html>